<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin-top: 20px;
        }

        table {
            border: 1px solid #000;
        }

        td {
            border: 1px solid #ccc;
            line-height: 50px;
            font-size: 16px;
            width: 110px;
            height: 50px;
            display: inline-block;

        }
    </style>
</head>

<body>
    <h1>生成任意行列</h1>
    <label for="row">行：</label><input type="text" id="row">
    <label for="col">列：</label><input type="text" id="col">
    <input type="button" id="btn" value="生成">
    <div id="tab">
        <!-- <table>

        <tr>
            <td></td>
        </tr>
    </table> -->
    </div>
</body>
<script>
    var row = document.getElementById("row");
    var col = document.getElementById("col");
    var btn = document.getElementById("btn");
    var tab = document.getElementById("tab");

    // 拼接函数

    function joint(x, y) {
        x = Number(x); //行数
        y = Number(y); //列数
        var html = '';
        html += '<table>'
        for (var i = 1; i <= x; i++) {
            html += '<tr>'
            html += '<td>' + i + '</td>';

            for (j = 1; j <= y; j++) {
                html += '<td>' + '第' + i + '行' + '第' + j + '列' + '</td>';
            }
            html += '</tr>';
        }
        return html += '</table>';


    }
    btn.onclick = function () {
        tab.innerHTML = joint(row.value, col.value);

    }
</script>

</html>